<template>
	<view>
		<view class="" style="position: fixed;width: 100%;z-index: 9;top: 0rpx;">
			<u-tabs
			:duration="0" 
			:list="cateList" 
			:is-scroll="false" 
			height="70" 
			:active-color="vk.getVuex('$app.config.color.sec')"
			:inactive-color="vk.getVuex('$app.config.color.main')"
			:bg-color="vk.getVuex('$app.config.bg.navbar')"
			bar-height="6" 
			bar-width="40" 
			:current="cateCurrent" 
			@change="cateClick"></u-tabs>
		</view>
		<view class="u-p-t-60"></view>
		<view class="u-flex u-row-left u-flex-wrap u-p-l-20 u-p-t-20">
			<block v-for="(item, index) in orderList" :key="index">
				<view :class="cateCurrent===1 || cateCurrent===2?'tab1':'tab'" @click="detail(item.order_id)">
					<image lazy-load :src="item.image" mode="aspectFill"></image>
				</view>
			</block>
		</view>
		
		<view class="" v-if="!noData">
			<u-loadmore :status="loadStatus" font-size="24" :margin-top="30" :margin-bottom="30" color="#B8B8B8"/>
		</view>
		<nodata v-else height="50vh"></nodata>
		
		<view class="safe-area-inset-bottom">
			<view class="" style="height: 1rpx;"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cateCurrent: 0,
				cateList: [{index: 0, name: '壁纸'},{index: 1, name: '头像'},{index: 5, name: '表情包'},{index: 2, name: '视频'}],
				noData: false,
				orderList: [],
				pageIndex: 0,
				loadStatus: 'loading',
			}
		},
		async onLoad({index}) {
			var that = this
			that.cateCurrent = parseInt(index)
			await that.getList(1)
		},
		methods: {
			detail(id){
				uni.navigateTo({
					url: '/pages/order/detail?id='+id
				})
			},
			cateClick(e){
				var that = this
				that.noData = false
				that.cateCurrent = e
				that.getList(1)
			},
			async getList(on){
				let that = this;
				
				// 点击切换菜单 回复初始状态
				if(on == 1){
					that.orderList = []
					that.pageIndex = 0
				}
				that.pageIndex = that.pageIndex + 1
				that.loadStatus = 'loading'
				
				let data = await that.vk.callFunction({
					url: 'client/wechat/list/kh/getOrder',
					data:{
						pageIndex: that.pageIndex,
						pageSize: 10,
						whereJson: {
							mode: that.cateList[that.cateCurrent].index,
							user_id: that.vk.getVuex('$user.userInfo._id')
						},
						sortArr: [{name: '_add_time', type: 'desc'}]
					}
				});
				
				that.orderList = that.orderList.concat(data.rows)
				if(data.hasMore) that.loadStatus = 'loadmore'
				else that.loadStatus = 'nomore'
				if(data.total == 0) that.noData = true
				else that.noData = false
			},
		},
		async onReachBottom(){
			let that = this;
			if(that.loadStatus == 'nomore') return
			await that.getList()
		},
	}
</script>
<style lang="scss" scoped>
	.slot-wrap {
		display: flex;
		align-items: center;
		flex: 1;
		padding: 0 30rpx 0 0;
	}
	.tab{
		position: relative;
		margin-right: 16rpx;
		margin-bottom: 16rpx;
		border-radius: 12rpx;
		image{
			border-radius: 12rpx;
			width: 226rpx;
			height: 360rpx;
		}
	}
	.tab1{
		position: relative;
		margin-right: 16rpx;
		margin-bottom: 16rpx;
		image{
			border-radius: 12rpx;
			width: 226rpx;
			height: 226rpx;
		}
	}
</style>